<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-17 10:02:09
-->
<template>
<div>
  <div class="top">
    <ul>
      <li>首页</li>
      <li>读书</li>
      <li>电影</li>
      <li>音乐</li>
      <li>同城</li>
      <li>小组</li>
      <li>阅读</li>
      <li>FM</li>
      <li>时间</li>
      <li>豆品</li>
    </ul>
    <div>注册/登录</div>
    <div>下载客户端</div>
  </div>
  <div class="body">
    <div class="wrapper">
      <div class="body_check">
      <div class="logo">
        <a href="">DB电影</a>
      </div>
      <div class="sousuo">
        <input type="text" placeholder="搜索电影、电视剧、综艺、影人">
        <a href=""><i class="iconfont icon-sousuo"></i></a>
      </div>
    </div>
    <hr>
    <div class="body_select">
      <ul>
        <li @click="goAside">影讯&购票</li>
        <li>选电影</li>
        <li>电视剧</li>
        <li> <router-link to="/article" tag="div">排行榜</router-link>   </li>
        <li> <router-link to="/classify" tag="div">分类</router-link>   </li>

        <li> <router-link to="/comment" tag="div">影评</router-link>   </li>

        <li>2020年度榜单</li>
        <li>2020书影音报告</li>
      </ul>
    </div>
    </div>
  </div>
</div>

</template>


<style lang="scss" scoped>
@import "https://at.alicdn.com/t/font_2851456_8vrph6cpusr.css?spm=a313x.7781069.1998910419.40&file=font_2851456_8vrph6cpusr.css";
.top{
  background-color: #545652;
  height: 28px;
  color: #c4c5c4;
  font-size: 12px;
  li{
    float: left;
    padding: 0 12px;
    line-height: 28px;
  }
  li:hover{
    color: #f0f3f5;
    cursor: pointer;
  }
  div{
    float: right;
    padding: 0 12px;
    line-height: 28px;
  }
}
.body{
  height: 115px;
  background-color: #f0f3f5;
  .wrapper{
    width: 70%;
    text-align: center;
    .body_check{
      margin-bottom: 20px;
      .logo{
        float: left;
        line-height: 70px;
        font-size: 28px;
        margin-left: 20px;
        a{
          cursor: pointer;
          color: #298ecd;
          font-weight: bold;
        }
      }
      .sousuo{
        height: 50px;
        line-height: 70px;
        input{
          background: #fff;
          width: 461px;
          height: 28px;
          text-align: left;
          padding-left: 0px;
          padding-top: 6px;
          padding-bottom: 0;
          font-size: 13px;
          outline: none;
          border-radius: 5%;
        }
        a{
          height: 40px;
          i{
            font-size: 30px;
            color: #fff;
            border: 1px solid #8b959e;
            border-left: 0;
            border-top-right-radius: 10%;;
            border-bottom-right-radius: 10%;
            background-color: #8b959e;
          }
        }
      }
    }
    hr{
      border: 1px solid #e7eeef;
      margin-top: 30px;
      margin-bottom: 10px;
    }
    .body_select{
      color: #3b86b3;
      font-size: 14px;
      li{
        float: left;
        padding: 0 18px;
      }
      li:hover{
        color: #f0f3f5;
        background-color: #3f6ba6;
      }
    }
  }
}
</style>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      goAside(){
        this.$router.push('/aside');
      },
    }
  }
</script>